<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 800px;
            display: block;
        }
    </style>
</head>

<body>
    <button id="zxy">张学友</button>
    <button id="ldh">刘德华</button>
    <a
        href="https://www.bilibili.com/video/BV1Sy4y1C7ha?p=204&spm_id_from=pageDriver&vd_source=480c28921b1b6c12cb33e4a6f0a94947">学习视频链接共3个</a>
    <img src="https://pic.rmb.bdstatic.com/bjh/events/eb97bc333c8509e7281b720de76bfb713482.jpeg@h_1280">
    <p>请选择其中一个当小厮</p>
    <input type="text" value="请输入名字">
    <button id="select">确定</button>
    <script>
        //修改元素属性
        let zxy = document.getElementById('zxy');
        let ldh = document.getElementById('ldh');
        let imgs = document.querySelector('img');
        let date = new Date();
        let h = date.getHours();
        zxy.onclick = function () {
            imgs.src = 'https://pic.rmb.bdstatic.com/bjh/events/eb97bc333c8509e7281b720de76bfb713482.jpeg@h_1280';
            //不同时间不同问候语
            if (h < 12) {
                imgs.title = "上午好，张学友给娘娘请安";
            } else {
                imgs.title = "张学友";
            }

        }
        ldh.onclick = function () {
            imgs.src = 'https://i1.hdslb.com/bfs/archive/ecc3c83d746bd5845d17a1b2a6fc2051bf87f022.jpg';
            if (h > 12) {
                imgs.title = '下午好，刘德华给小主请安了';
            } else {
                imgs.title = '刘德华';
            }
        }
        let input = document.querySelector('input');
        let btn3 = document.getElementById('select');
        btn3.onclick = function () {
            //表单value值改变
            input.value = '已选择';
            //按钮被禁用  this.disabled=true;一样
            btn3.disabled = true;
        }

    </script>
</body>

</html>